<template>
  <div>
    <el-tree
      :data="allData"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="render">
    </el-tree>
  </div>
</template>

<script>
import _ from 'lodash'
  export default {
    props:{
      delete:Function,
      data:{
        type:Array,
        default:()=>[]
      },
      fileDrop:Array,
      diectoryDrop:Array,
      //dataset:Array
    },
    data() {
      return {
        allData:[],
        currentId:'',
        currentContent:''
      }
    },
    watch:{
      data(){//数据更新后重新渲染
        this.transformData()
        console.log(this.allData);   
      }
    },
    methods: {
      isParent(data){
        return data.type==='parent'
      },
      handleRename(data){
        console.log(data);
        this.currentId=data.id
        this.currentContent=data.name
      },
      remove(id){
        //console.log(id);
        let list=_.cloneDeep(this.data)
        list=list.filter(l=>l.id!==id)
        //console.log(list);
        
        this.$emit('dataset',list)
        this.$message({
            type: 'success',
            message: '删除成功!'
          });
      },
      handleRemove(data){
        this.$confirm(`此操作将永久删除该文件,${data.name} 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete?this.delete(data.id).then(()=>{
            this.remove(data.id)
          }):this.remove(data.id)
          
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      handleCommand(data,value){
        console.log(data,value)
        if (value==='rn') {
          this.handleRename(data)
        } else if(value==='rm'){
          this.handleRemove(data)
        }
      },
      changeBox(value){
        console.log(value);
        
      },
      render(h,{node,data}) {
        let list=this.isParent(data)?this.diectoryDrop:this.fileDrop
        //console.log(list)
        return (<div style="width:100%">
        {
          this.isParent(data)?
            node.expanded?
              <i class="el-icon-folder-opened"></i>:
              <i class="el-icon-folder"></i>:
          <i class="el-icon-document"></i>
        }
        
        {data.id===this.currentId?<el-input style="width:60%" v-model={this.currentContent} value={this.currentContent}></el-input>:data.name}
        {/* data.name  on-change="changeBox()"*/}
        {/* bind绑定时，会把原来的参数向后移动 */}
        <el-dropdown placement="bottom-start" trigger="click" on-command={this.handleCommand.bind(this,data)}>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            {list.map(i=>(
              <el-dropdown-item command={i.text}>{i.value}</el-dropdown-item>
            ))
            }
          </el-dropdown-menu>
        </el-dropdown>
        </div>)
      },
      transformData(){
        //对数据进行克隆
        let AllData=_.cloneDeep(this.data)//防止在子组件操作父组件的数据
        //把id提取成index
        let TreeList=AllData.reduce((memo,current)=>{
          //current.label=current.name
          memo[current["id"]]=current
          return memo
        },{})
        //vuex源码
        let result=AllData.reduce((arr,current)=>{
          let pid = current.pid
          let parent=TreeList[pid];
          if (parent) {
            parent.children?parent.children.push(current):parent.children=[current]
          }else if(pid===0){//root文件夹
            arr.push(current)
          }
          return arr
        },[])
        //console.log(result);
        this.allData=result
        }
    },
    mounted() {
      this.transformData()
    },
  }
</script>

<style>
.el-tree{
  width: 50%;
}
.el-dropdown{
  float: right;
}
</style>